<route lang="json5" type="page">
// @formatter:off
{
  layout: 'theme',
  style: {
    navigationBarTitleText: '页面路由权限控制',
    // navigationStyle: 'default', // custom default
  }
}
 // @formatter:on
</route>

<script setup lang="ts">
import { useUserStore } from '@/store'

const store = useUserStore()
const { userPerms } = storeToRefs(store)

const router = useRouter()

const getUserPerms = () => {
  return userPerms.value
}

// 跳转到页面1
const goToVip = () => {
  router.push({
    path: '/pages/router-demo/vip',
    query: {
      name: 'fteam',
    },
  })
  // uni.navigateTo({
  //   url: '/pages/router-demo/vip',
  // })
}

// 跳转到页面2
const goToVipAndAdmin = () => {
  uni.navigateTo({
    url: '/pages/router-demo/vip-admin',
  })
}

// 跳转到页面3
const goToLogined = () => {
  uni.navigateTo({
    url: '/pages/router-demo/logined',
  })
}

// 跳转到页面3
const goToAdminPage = () => {
  uni.navigateTo({
    url: '/pages/router-demo/admin',
  })
}

function handleLogout() {
  const store = useUserStore()
  store.clearUserInfo()
}

function handleGoLogin() {
  uni.navigateTo({
    url: '/pages/router-demo/login',
  })
}
</script>

<template>
  <view class="flex flex-col gap-2 p16px">
    <view class="w-100vw flex items-center justify-center p-y-20rpx">--------用户权限----------</view>
    <view class="w-100vw flex items-center justify-center p-y-20rpx">{{ getUserPerms() }}</view>
    <view class="w-100vw flex items-center justify-center p-y-20rpx">--------页面权限----------</view>
    <button class="w-full" @click="goToVip">['vip']</button>
    <button class="w-full" @click="goToVipAndAdmin">['vip', 'admin']</button>
    <button class="w-full" @click="goToAdminPage">['admin']</button>
    <button class="w-full" @click="goToLogined">['logined']</button>
    <view class="w-100vw flex items-center justify-center p-y-20rpx">---按钮权限[页面上面这里有两个按钮的]----</view>
    <button v-perms="['operation:user:create']" class="w-full">有按钮权限: operation:user:create</button>
    <button v-perms="['operation:user:delete']" class="w-full">无按钮权限: operation:user:delete</button>
    <button class="w-full bg-blue text-white" @click="handleGoLogin">跳转到登录页面</button>
    <button class="w-full bg-red text-white" @click="handleLogout">注销登录</button>
  </view>
</template>
